<template>
  <section>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-table
          :data="questionClassList" border stripe
          highlight-current-row
          @selection-change="handleSelectionClassChange" row-class-name="link">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="clazz"
            label="分类"
            >
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <el-row>
            <el-col :span="24">
              <el-form ref="searchQuestionCondition" :model="searchQuestionCondition" label-width="80px" inline>
                <el-form-item label="标题">
                  <el-input v-model="searchQuestionCondition.title" style="width: 300px;"/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" @click="save">确定</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <el-table
            :data="questionList.content" border stripe
            ref="multipleTable"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="id"
              label="编号"
              width="55">
            </el-table-column>

            <el-table-column prop="title" label="题目" ></el-table-column>
          </el-table>
          <div class="mt10">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="questionList.totalElements"
              :page-size="questionList.size"
              :current-page.sync="currentQuestionPage" @current-change="getPageChange">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </section>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";
export default {
  props: {
    isClose: Boolean,
    type: String,
    refresh: Boolean
  },
  created() {
    this.$store.dispatch("getQuestClassListS").then(res => {});
  },
  mounted() {
    this.search();
    this.$watch("refresh", val => {
      console.log(val, "11111");
      this.search();
    });
  },
  data() {
    return {
      currentQuestionPage: 1,
      showQuestionEditor: false,
      QuestionStatus: Status.QuestionStatus,
      multipleSelection: [],
      multipleSelectionS: [],
      searchQuestionCondition: {
        pageSize: 10,
        title: "",
        type: "",
        classIds: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      questionList: "questionList",
      questionClassList: "questionClassList",
      currentTask: "currentTask"
    }),
    quests() {
      return this.currentTask.quests;
    }
  },
  methods: {
    handleSelectionClassChange(val) {
      this.multipleSelectionS = val;
      if (this.multipleSelectionS) {
        var tem = [];
        this.multipleSelectionS.map((item, index) => {
          tem.push(item.id);
        });
        this.searchQuestionCondition.classIds = tem.join(",");
        this.search();
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getPageChange(val) {
      console.log(this.searchQuestionCondition, 33);
      this.searchQuestionCondition.type = this.type;
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchQuestionCondition
      );
      this.$store.dispatch("getQuestionPageS", tem).then(ret => {
        var data = ret.data.data.content;
        console.log(data);
        var tem = [];
        if (this.quests) {
          this.quests.map((item, index) => {
            data.map((item1, index1) => {
              if (item.id === item1.id) {
                tem.push(item1);
              }
            });
          });
        }
        this.toggleSelection(tem);
      });
    },
    search() {
      this.getPageChange(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    save() {
      if (this.multipleSelection.length > 0) {
        var tem = [];
        this.multipleSelection.map((item, index) => {
          tem.push({ id: item.id, title: item.title });
        });
        this.$store.dispatch("updateQuests", tem);
        this.back();
      } else {
        this.$message({
          message: "警告哦，至少选择一个题目",
          type: "warning"
        });
      }
    },
    back() {
      this.$emit("close");
    }
  },
  components: {}
};
</script>
<style scoped>
</style>
